<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
// import VChart from 'vue-echarts';

// 注册所需的ECharts模块
echarts.use([LineChart, CanvasRenderer, TitleComponent, TooltipComponent, LegendComponent, GridComponent]);

const sumMoney = ref(0);
const sumOrders = ref(0);
const sumUsers = ref(0);
const chartContainer = ref(null);
let myChart = null;

// 获取最近七天的日期数组
function getLastSevenDays() {
    const dates = [];
    for (let i = 6; i >= 0; i--) {
        const date = new Date();
        date.setDate(date.getDate() - i);
        dates.push(date.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
    }
    return dates;
}

// 获取图表数据
async function fetchChartData() {
    try {
        const response = await fetch('http://localhost:8080/user/LineChart');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching chart data:', error);
        return [];
    }
}

onMounted(async () => {
    // 获取当日总流水
    fetch('http://localhost:8080/system/getMoneySum')
        .then(response => response.json())
        .then(data => {
            sumMoney.value = data;
        });

    // 获取交易订单量
    fetch('http://localhost:8080/system/getOrdersSum')
        .then(response => response.json())
        .then(data => {
            sumOrders.value = data;
        });

    // 查询总用户数量
    fetch('http://localhost:8080/system/getuserSum')
        .then(response => response.json())
        .then(data => {
            sumUsers.value = data;
        });

    // 初始化图表
    myChart = echarts.init(chartContainer.value);
    const chartData = await fetchChartData();
    const option = {
        xAxis: {
            type: 'category',
            data: getLastSevenDays()
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: chartData,
            type: 'line',
            smooth: true
        }]
    };
    myChart.setOption(option);
});
</script>
<template>
    <div>
        <ul style="width: 900px;margin: 0 auto">
            <li>
                <div class="icon">
                    <i class="iconfont">&#xe605;</i>
                    <span class="p1">当日交易总流水/元</span>
                </div>
                <p class="p2">{{ sumMoney }}</p>
            </li>
            <li>
                <div class="icon">
                    <i class="iconfont">&#xe679;</i>
                    <span class="p1">当日交易订单量/笔</span>
                </div>
                <p class="p2">{{ sumOrders }}</p>
            </li>
            <li>
                <div class="icon">
                    <i class="iconfont">&#xe611;</i>
                    <span class="p1">当日开户数量/人</span>
                </div>
                <p class="p2">{{ sumUsers }}</p>
            </li>
        </ul>

        <!-- 图表 -->
        <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
    </div>
</template>
<style scoped>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: 'iconfont';  /* Project id 4674018 */
    src: url('https://at.alicdn.com/t/c/font_4674018_byuetzv98h6.woff2?t=1730634752880') format('woff2'),
    url('https://at.alicdn.com/t/c/font_4674018_byuetzv98h6.woff?t=1730634752880') format('woff'),
    url('https://at.alicdn.com/t/c/font_4674018_byuetzv98h6.ttf?t=1730634752880') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 30px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 5px;
}

.icon {
    margin-top: 25px;
}

ul {
    width: 500px;
    display: flex;
    justify-content: space-between;
}

li {
    float: left;
    width: 200px;
    height: 120px;
    background-color: #deecf8;
    border: 2px solid #bcd9f1;
    border-radius: 20px;
}

.p1 {
    margin-left: 10px;
    font-size: 17px;
}

.p2 {
    margin-top: 10px;
    margin-left: 45px;
    font-size: 15px;
}
</style>
